@model PostPagerModel

@inject IStringLocalizer<Resource> _localizer

@if (Model.Pager.Items.Any())
{
  <div class="row row-cols-1 row-cols-md-2 row-cols-lg-3 g-4">
    @foreach (var post in Model.Pager.Items)
    {
      <div class="col">
        <article class="post-grid d-flex flex-column">
          <figure class="post-grid-cover">
            <img class="post-grid-img" src="@PageHelper.CheckGetCoverrUrl(post.Cover)" alt="@post.Title">
          </figure>
          @if (post.Categories != null)
          {
            <div class="post-grid-cats">
              @foreach (var cat in post.Categories)
              {
                <a class="post-grid-cats-link" href="~/category/@cat.Content" tabindex="-1">@cat.Content</a>
              }
            </div>
          }
          <h2 class="post-grid-title">
            <a class="post-grid-link" href="~/post/@post.Slug">@post.Title</a>
          </h2>
          <p class="post-grid-desc">@Html.Raw(post.Description)</p>
          <div class="post-grid-meta d-flex">
            <div class="post-grid-author">
              <img class="post-grid-author-img" src="@PageHelper.CheckGetAvatarUrl(post.User.Avatar)" width="16" height="16" alt="@post.User.NickName">
              <span class="post-grid-author-name">@post.User.NickName</span>
            </div>
            <div class="post-grid-date">
              <svg width="13" height="13" class="bi bi-calendar-event post-grid-date-icon">
                <use xlink:href="/_content/@ThemesStandardConstant.AssemblyName/img/icon-sprites.svg#bi-calendar-event"></use>
              </svg>
              <time class="post-grid-date-time">@DateTimeHelper.ToFriendlyShortDateString(post.PublishedAt)</time>
            </div>
            <a class="post-grid-more ms-auto" href="~/post/@post.Slug" tabindex="-1">
              <span>
                @_localizer["read"]
              </span>
              <svg width="16" height="16" class="bi bi-arrow-right-short">
                <use xlink:href="/_content/@ThemesStandardConstant.AssemblyName/img/icon-sprites.svg#bi-arrow-right-short"></use>
              </svg>
            </a>
          </div>

        </article>
      </div>
    }
  </div>
}
else
{
  <div class="h1 text-capitalize">@_localizer["empty"]!</div>
}
